<template>
  <div class="nav">
    <ul>
      <li><router-link to="/home/rabbit">首页</router-link></li>
      <li v-for="item in head" :key="item.id">
        <router-link  :to="'/home/category?id=' + item.id">{{
          item.name
        }}</router-link>
        <dl>
          <dd v-for="child in item.children" :key="child.id">
            <router-link :to="'/home/subs?id=' + child.id">
              <img :src="child.picture" alt="" />
              <p>{{ child.name }}</p>
            </router-link>
          </dd>
        </dl>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Nav",
  data() {
    return {
      head: [],
    };
  },
  created() {
    //获取导航分类
    this.$axios.get("/home/category/head").then((res) => {
      this.head = res.data.result;
    });
    
  },
};
</script>
<style scoped lang="less">
.nav{
  position: relative;
}
ul {
  z-index: 99;
  width: 820px;
  display: flex;
  justify-content: space-around;
  padding-left: 40px;
  z-index: 999;
  box-sizing: border-box;
  li {
    margin-right: 40px;
    width: 38px;
    text-align: center;

    &:hover > dl {
      height: 132px;
      overflow: hidden;
    }

    &:hover > a {
      color: #27ba9b;
      border-bottom: 1px solid #27ba9b;
    }

    a {
      color: #333;
      font-size: 16px;
      line-height: 32px;
      height: 32px;
      display: inline-block;
      border-bottom: 1px solid transparent;
    }

    dl {
      padding-top: 20px;
      position: absolute;
      transition: all 0.2s ease 0.1s;
      left: -200px;
      overflow: hidden;
      top: 50px;
      width: 1240px;
      height: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      box-shadow: rgb(204, 204, 204) 0px 0px 5px;
      overflow: hidden;
      padding: 0px 70px;
      box-sizing: border-box;
      background: white;
      z-index: 999;

      dd {
        width: 110px;
        text-align: center;

        a {
          font-size: 14px;

          &:hover {
            color: #27ba9b;
          }

          img {
            width: 60px;
            height: 60px;
          }

          p {
            padding-top: 10px;
          }
        }
      }
    }
  }
}
</style>
